<template>
  <div class="page-container">
    <DynamicForm :config="dyConfig" :questions="dyQuestions" ref="dynamicForm"></DynamicForm>
    <DynamicTable :tables="dyTable" :config="dyTableConfig" :icons="dyIcons" ref="dynamicTable"></DynamicTable>

    <AddDialog v-model:visible="state.showPopup" :show-type="state.showType" :userIds="state.userIds" :data="state.data" @refresh="getPageData" v-if="state.showPopup"></AddDialog>
    <!-- <a-modal :visible="state.showEdit" width="500px" title="编辑" cancelText="取消" okText="确定" @ok="handleOk" @cancel="handleCancel">
      <DynamicForm :config="dyEditConfig" :questions="dyEditQuestions" ref="editForm"></DynamicForm>
    </a-modal> -->
  </div>
</template>

<script lang="ts" setup>
import { createVNode, getCurrentInstance, nextTick, onBeforeUnmount, reactive, ref } from 'vue';
import { DynamicForm, DynamicTable } from '@/components/public-template';
import { filter } from 'rxjs/operators';
import AddDialog from './components/addDialog.vue';
import { Api, dataPermissionPage, dataPermissionSave } from '@/config/api/dataAuthority';
import indexService from './index.service';
import { message } from 'ant-design-vue';
import { formInfoStore } from '@/store/modules/form';

const state = reactive({
  showPopup: false,
  showType: '',
  data: {},
  userIds: []
});

const dyConfig: any = {
  queryUrl: Api.dataPermissionPage,
  protType: 'post',
  labelCol: 6,
  wrapperCol: 18,
  grid: 8,
  style: 'table-form',
  cancelSave: true
};
const dyTableConfig: any = {
  queryUrl: Api.dataPermissionPage,
  protType: 'post',
  isScreen: true,
  rowKey: 'userId',
  rowSelection: {
    type: 'checkbox'
  }
};
const dyEditConfig: any = {
  cancelSave: true,
  grid: 24,
  layout: 'horizontal'
};
const dyQuestions: any = reactive(indexService.getQuestions());
const dyTable: any = reactive(indexService.getTables());
const dyIcons: any = reactive(indexService.getIcons());
const formStore = formInfoStore();
formStore.setQuestions(indexService.getEditQuestions());
const dyEditQuestions = formStore.getQuestions;
const dynamicForm = ref(null);
const dynamicTable = ref(null);
const editForm = ref(null);
// 监听table
const { proxy }: any = getCurrentInstance();
const subscribeSub = proxy.$NotificationPubSub
  .getParams()
  .pipe(filter((res) => res !== 0))
  .subscribe((item: any) => {
    if (item.key === 'DYNAMICLOCALICONS' && item.value.value === '批量编辑') {
      if (!item.state.selected.length) {
        return message.warning('请先选中一个选项');
      }
      const ids = item.state.selected.map((res) => {
        return res.userId;
      });
      state.showPopup = true;
      state.showType = 'BATCHEDIT';
      state.userIds = ids;
    } else if (item.value.part?.text === '编辑' && item.key === 'DYNAMICLOCALTABLE') {
      state.showPopup = true;
      state.showType = 'EDIT';
      state.data = item.value.data;
    }
  });

const subscribeFormSub = proxy.$NotificationFormSub
  .getParams()
  .pipe(filter((res) => res !== 0))
  .subscribe((item) => {
    if (item.key === 'RADIOSERVE') {
      console.log(111);
    }
  });

const getPageData = () => {
  dynamicTable.value.getData();
};

onBeforeUnmount(() => {
  subscribeSub && subscribeSub.unsubscribe();
  proxy.$NotificationPubSub.clearParams();
  subscribeFormSub && subscribeFormSub.unsubscribe();
  proxy.$NotificationFormSub.clearParams();
});
</script>

<style lang="less" scoped></style>
